<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="fragment" content="!">
  <title>Bootstrap Magic : Generate your own bootstrap theme quickly and easily</title>
  <meta name="description" content="Awesome features like contextual typeahead and colorpicker help you make your custom bootstrap 3.1 themes quickly and easily."
  />
  <link rel="stylesheet" href="css/app.css">
  <style>
    [ng-cloak] {
      display: none;
    }
  </style>

  <script>
    // include angular loader, which allows the files to load in any order
    /*
     AngularJS v1.0.0rc1
     (c) 2010-2012 AngularJS http://angularjs.org
     License: MIT
    */
    'use strict'; (function (i) {
      function d(c, a, e) { return c[a] || (c[a] = e()) } return d(d(i, "angular", Object), "module", function () {
        var c = {}; return function (a, e, f) {        
e && c.hasOwnProperty(a) && (c[a] = null); return d(c, a, function () {
          function b(a, b, d) { return function () { c[d || "push"]([a, b, arguments]); return g } } if (!e) throw Error("No module: " + a); var c = [], d = [], h = b("$injector", "invoke"), g = {            
_invokeQueue: c, _runBlocks: d, requires: e, name: a, provider: b("$provide", "provider"), factory: b("$provide", "factory"), service: b("$provide", "service"),
            value: b("$provide", "value"), constant: b("$provide", "constant", "unshift"), filter: b("$filterProvider", "register"), directive: b("$compileProvider", "directive"), config: h, run: function (a) { d.push(a); return this }          
}; f && h(f); return g
        })
        }
      })
    })(window);

    // include a third-party async loader library
    /*!
     * $script.js v1.3
     * https://github.com/ded/script.js
     * Copyright: @ded & @fat - Dustin Diaz, Jacob Thornton 2011
     * Follow our software http://twitter.com/dedfat
     * License: MIT
     */
    !function (a, b, c) { function t(a, c) { var e = b.createElement("script"), f = j; e.onload = e.onerror = e[o] = function () { e[m] && !/^c|loade/.test(e[m]) || f || (e.onload = e[o] = null, f = 1, c()) }, e.async = 1, e.src = a, d.insertBefore(e, d.firstChild) } function q(a, b) { p(a, function (a) { return !b(a) }) } var d = b.getElementsByTagName("head")[0], e = {}, f = {}, g = {}, h = {}, i = "string", j = !1, k = "push", l = "DOMContentLoaded", m = "readyState", n = "addEventListener", o = "onreadystatechange", p = function (a, b) { for (var c = 0, d = a.length; c < d; ++c)if (!b(a[c])) return j; return 1 }; !b[m] && b[n] && (b[n](l, function r() { b.removeEventListener(l, r, j), b[m] = "complete" }, j), b[m] = "loading"); var s = function (a, b, d) { function o() { if (!--m) { e[l] = 1, j && j(); for (var a in g) p(a.split("|"), n) && !q(g[a], n) && (g[a] = []) } } function n(a) { return a.call ? a() : e[a] } a = a[k] ? a : [a]; var i = b && b.call, j = i ? b : d, l = i ? a.join("") : b, m = a.length; c(function () { q(a, function (a) { h[a] ? (l && (f[l] = 1), o()) : (h[a] = 1, l && (f[l] = 1), t(s.path ? s.path + a + ".js" : a, o)) }) }, 0); return s }; s.get = t, s.ready = function (a, b, c) { a = a[k] ? a : [a]; var d = []; !q(a, function (a) { e[a] || d[k](a) }) && p(a, function (a) { return e[a] }) ? b() : !function (a) { g[a] = g[a] || [], g[a][k](b), c && c(d) }(a.join("|")); return s }; var u = a.$script; s.noConflict = function () { a.$script = u; return this }, typeof module != "undefined" && module.exports ? module.exports = s : a.$script = s }(this, document, setTimeout)


    var dev = true;
    var ext = (dev) ? '?now=' + new Date().getTime() : '';

    // load all of the dependencies asynchronously.
    $script([
      'lib/less/less-1.4.1.min.js',
      'lib/jquery/jquery-1.8.3.min.js'
    ], function () {
      $script([
        '../twitter-bootstrap/js/bootstrap.min.js',
        'lib/colorpicker/bootstrap-colorpicker.js'
      ], function () {
        $script([
          'lib/angular/angular.js',
          'js/app.js' + ext,
          'js/services.js' + ext,
          'js/controllers.js' + ext,
          'js/filters.js' + ext,
          'js/directives.js' + ext
        ], function () {
          // when all is done, execute bootstrap angular application   
          angular.bootstrap(document, ['bootstrapVariablesEditor']);
        });
      });
    });
  </script>
  <title>Bootstrap Magic : Generate simply your own bootstrap 3.1 theme </title>
  <meta name="description" content="Awesome features like contextual typeahead and colorpicker to make smooth bootstrap 3.1 theme faster."
  />
  <link id="twitterBootstrapLess" rel="stylesheet/less" href="../twitter-bootstrap/less/bootstrap.less">
  <!--  <link id="twitterResponsiveLess" rel="stylesheet/less" href="../twitter-bootstrap/less/responsive.less"> -->


  <script src="//ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js"></script>
  <script>
    WebFont.load({
      google: {
        families: ['Droid Sans', 'Droid Serif']
      }
    });
  </script>


  <script type="text/javascript">
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-37710723-1']);
    _gaq.push(['_trackPageview']);

    (function () {
      var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
      ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();
  </script>
</head>

<body data-ng-cloak>
  <div class="protected">
    <nav class="navbar navbar-default" role="navigation">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="../index.html" title="Bootrstrap Magic written in AngularJS">Bootstrap Magic</a>
      </div>

      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse navbar-ex1-collapse">
        <ul class="nav navbar-nav">
          <li><a href="../index.html" title="bootstrap 3.1 themes generator presentation">Home</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Editor <b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a href="index.html#!/editor" title="bootstrap 3.1 themes generator">Version Bootstrap 3.1</a></li>
              <li><a href="../3.0">Version Bootstrap 3.0</a></li>
              <li><a href="../2.3.2">Version Bootstrap 2.3.2</a></li>
            </ul>
          </li>
          <!--            <li ><a href="index.html#!/submit-theme" title="bootstrap 3.1 themes generator">Submit your theme</a></li>
 -->
          <li><a href="http://en.orson.io/17/build-responsive-website-without-coding/?utm_source=Bootstrap%20Magic%20&utm_medium=referral&utm_content=Header&utm_campaign=Bootstrap"
              title="Create website easily">Website builder Orson</a></li>
          <!--         <li ><a href="https://medium.com/@tsifei/recrutement-stage-ux-et-webdesign-511c71815546" title="Recruit Web & UX Webdesigner in Paris">Recruit Web & UX Webdesigner in Paris</a></li>
 -->
        </ul>

        <ul class="nav navbar-nav navbar-right socialButtons">
          <li class="twitter">
            <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://pikock.github.io/bootstrap-magic/" data-text="Bootstrap Magic feat Bootstrap 3.1 : Awesome theme generator with live preview"
              data-lang="en" data-hashtags="bootstrap, angularjs">Tweeter</a>
          </li>
          <li>
            <div class="fb-like" data-href="http://pikock.github.io/bootstrap-magic/" data-send="false" data-layout="button_count" data-width="50"
              data-show-faces="false" data-action="like"></div>
          </li>

          <li>
            <div class="g-plusone" data-size="medium" data-href="http://pikock.github.io/bootstrap-magic/"></div>
          </li>
        </ul>

      </div>
      <!-- /.navbar-collapse -->
    </nav>
  </div>

  <div class="protected">
    <div class="isViewLoading" ng-show="isViewLoading">
      <h1>It's gonna be magic... wait for it...</h1>
      <div class="loader">
        <div class="bar1"></div>
        <div class="bar2"></div>
        <div class="bar3"></div>
        <div class="bar4"></div>
        <div class="bar5"></div>
        <div class="bar6"></div>
        <div class="bar7"></div>
        <div class="bar8"></div>
      </div>
    </div>
  </div>

  <div ng-view></div>

  <div id="fb-root"></div>
  <script type="text/javascript">
      (function (d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s); js.id = id;
        js.src = "//connect.facebook.net/fr_FR/all.js#xfbml=1&appId=239545502808545";
        fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk'));

      window.___gcfg = { lang: 'fr' };

      (function () {
        var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
        po.src = 'https://apis.google.com/js/plusone.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
      })();

      !function (d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (!d.getElementById(id)) { js = d.createElement(s); js.id = id; js.src = "https://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs); } }(document, "script", "twitter-wjs");

  </script>
  <script type="text/javascript">
    /* <![CDATA[ */
    var google_conversion_id = 977336662;
    var google_custom_params = window.google_tag_params;
    var google_remarketing_only = true;
/* ]]> */

  </script>
  <script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js">

  </script>
  <noscript>
    <div style="display:inline;">
      <img height="1" width="1" style="border-style:none;" alt="" src="//googleads.g.doubleclick.net/pagead/viewthroughconversion/977336662/?value=0&amp;guid=ON&amp;script=0"
      />
    </div>
  </noscript>
</body>

</html>